<template>
  <div class="upload-body">
    <el-dialog v-model="centerDialogVisible" title="举报" width="50%" center>
      <!-- 表单 -->
      <el-form
        label-position="top"
        :model="formData"
        class="form-box"
        :rules="formRules"
        ref="formRef"
      >
        <el-form-item label="举报类型" prop="report_type">
          <!-- 支付类型 -->
          <el-radio-group v-model="formData.report_type" class="type-radio f-j-sb-a-c">
            <el-radio
              :label="item.title"
              v-for="(item, index) in typeList"
              :key="index"
              >{{ item.title }}</el-radio
            >
          </el-radio-group>
        </el-form-item>

        <el-form-item label="举报理由" prop="report_content">
          <el-input
            id="inputor"
            class="communityCenter-post-input"
            ref="promptsInput"
            type="textarea"
            autosize
            v-model="formData.report_content"
            placeholder="请描述您的举报理由~"
          ></el-input>
        </el-form-item>

        <el-form-item label="上传截图(选填, 最多可上传6张)" prop="image_urls">
          <!-- 上传图片列表 -->
          <div class="upload-img-list flex">
            <div
              class="upload-item"
              v-for="(item, index) in formData.image_urls"
              :key="index"
              v-loading="!item.url"
            >
              <el-image :src="item.url" fit="cover">
                <template #error>
                  <div class="image-slot"></div>
                </template>
              </el-image>
              <svg-icon
                class="upload-close"
                name="icon-gb"
                @click="imgUploadDel(item, index)"
              ></svg-icon>
            </div>
            <upload
             fileName="community"
              ref="uploadRef"
              @sucess="uploadsucess"
              @fileQueued="fileQueued"
              :limit="6 - formData.image_urls.length"
              v-show="formData.image_urls.length < 6"
            >
              <div class="upload-more upload-item f-j-a-c">
                <svg-icon name="icon-tj-24" class="svg-icon"></svg-icon>
              </div>
            </upload>
          </div>
        </el-form-item>

        <el-form-item label="联系方式(选填)">
          <el-input
            id="inputor"
            class="community-title"
            ref="promptsInput"
            type="text"
            autosize
            v-model="formData.contact"
            placeholder="请输入您的联系方式~"
          ></el-input>
        </el-form-item>
      </el-form>
     
      <template #footer right>
        <span class="dialog-footer flex">
          <div class="close-btn f-j-a-c" @click="close">取消</div>
          <div class="confirm-btn f-j-a-c" @click="confirm">确定</div>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import upload from "@/components/upload.vue";
import { userReport } from "@/axios/community.js";

import {
  defineComponent,
  reactive,
  toRefs,
  onUnmounted,
  onMounted,
  computed,
  getCurrentInstance,
  ref,
} from "vue";
export default defineComponent({
  props: {
    postsDetail: {
      type: Object,
      default: () => {},
      // default:{}
    }, //内容
  },
  components: {
    upload,
  },
  setup(props, { attrs, slots, emit }) {
    const router = useRouter();
    const { proxy } = getCurrentInstance();
    const store = useStore();
    const formRef = ref(null);

    let data = reactive({
      centerDialogVisible: false,

      //   举报类型列表
      typeList: [
        {
          title: "欺诈",
          value: 0,
        },
        {
          title: "色情低俗",
          value: 1,
        },
        {
          title: "诱导行为",
          value: 2,
        },
        {
          title: "强制关注行为",
          value: 3,
        },
        {
          title: "传播不实信息",
          value: 4,
        },
        {
          title: "违法犯罪",
          value: 5,
        },
        {
          title: "骚扰",
          value: 6,
        },
        {
          title: "违规营销",
          value: 7,
        },
        {
          title: "侵权",
          value: 8,
        },
        {
          title: "其他",
          value: 9,
        },
      ],

      formData: {
        type: "0", //
        contact: "", //联系方式
        report_content: "", //举报内容
        report_type: "欺诈", //举报类型
        image_urls: [], //截图列表
        object_id: "", //id
      },

      formRules: {
        report_type: [
          {
            required: true,
            trigger: "change",
          },
        ],
        report_content: [
          {
            required: true,
            message: "请输入举报理由",
            trigger: "change",
            validator: (rule, value, callback) => {
              if (value === "" || !value) {
                callback(new Error("请输入举报理由"));
              } else {
                callback();
              }
            },
          },
        ],
      },
    });

    // 打开弹框
    let open = () => {
      data.centerDialogVisible = true;
    };

    // 取消
    let close = () => {
      data.centerDialogVisible = false;
    };

    // 确定
    let confirm = () => {
      data.formData.object_id = props.postsDetail.id;
      formRef.value.validate((valid, fields) => {
        if (valid) {
          console.log(data.formData);
          userReport({ ...data.formData })
            .then((res) => {
              ElMessage.success("举报成功");
              close();
            })
            .catch((err) => {
              ElMessage.error(err.message);
            });
        } else {
          console.log("error submit!", fields);
        }
      });
    };

    // 图片上传成功
    let uploadsucess = (obj) => {
      data.formData.image_urls.forEach((item) => {
        if (item.name == obj.name) {
          item.url = obj.url;
        }
      });
    };

    // 图片上传开始前
    let fileQueued = (file) => {
      let obj = {
        name: file.name,
        url: "",
      };
      data.formData.image_urls.push(obj);
    };

    // 删除已上传图片
    let imgUploadDel = (item, index) => {
      data.formData.image_urls.splice(index, 1);
    };

    return {
      imgUploadDel,
      formRef,
      uploadsucess,
      fileQueued,
      close,
      confirm,
      open,
      ...toRefs(data),
    };
  },
});
</script>
<style lang="scss" scoped>
.upload-body {
  :deep(.el-dialog.el-dialog--center) {
    border-radius: 20px;
    min-width: 600px;
    max-width: 800px;
  }

  :deep(.el-dialog--center .el-dialog__footer) {
    text-align: right !important;
  }
}

// 底部按钮
.dialog-footer {
  font-size: 14px;
  font-weight: bold;
  justify-content: flex-end;
  > div {
    height: 36px;
    width: 80px;
    border-radius: 10px;
    margin-left: 10px;
    cursor: pointer;
    background: #f3f4f5;
    color: #656f79;
    &:active {
      opacity: 0.7;
    }
  }
  .confirm-btn {
    background: linear-gradient(90deg, #9ed8e6 0%, #a1f0c0 100%);
    color: #ffffff;
  }
}

// 表单
.form-box {
  :deep(.el-form-item__label) {
    font-size: 14px;
    font-weight: bold;
    color: #000000;
  }
  > .el-form-item:not(:first-child) {
    padding-top: 10px;
  }
}

// 标题
.community-title {
  height: 40px;
  width: 100%;
  position: relative;
  background: #f7f8f9;
  border-radius: 10px;
  :deep(.el-input__wrapper) {
    border-radius: 10px;
    background: transparent;
    box-shadow: none;
  }
  :deep(.el-input__wrapper.is-focus) {
    box-shadow: 0 0 0 1px #64c8dc inset;
  }
}

// 支付类型
.type-radio {
  :deep(.el-radio__input.is-checked .el-radio__inner) {
    background: #64c8dc;
    background-color: #64c8dc;
    border-color: #64c8dc;
  }
  :deep(.el-radio__label) {
    font-size: 14px;
    color: #000000;
  }
}

// 文本输入框
.communityCenter-post-input {
  :deep(.el-textarea__inner) {
    border: none !important;
    background: #f3f4f5;
    border-radius: 10px;
    padding: 10px !important;
    resize: none;
    padding: 0;
    box-shadow: none !important;
    min-height: 80px !important;
    max-height: 480px !important;
    color: #000;
    &:focus {
      box-shadow: 0 0 0 1px #64c8dc inset !important;
    }
  }
}

// 上传图片列表
.upload-img-list {
  flex-wrap: wrap;
  .upload-item {
    margin: 10px 10px 0 0;
    width: 110px;
    height: 110px;
    border-radius: 20px;
    position: relative;

    .el-image {
      width: 100%;
      height: 100%;
      border-radius: 20px;
    }
    .upload-close {
      position: absolute;
      right: 8px;
      top: 8px;
      width: 16px;
      height: 16px;
      cursor: pointer;
    }
  }
  .upload-more {
    border: 1px solid #ececec;
    .svg-icon {
      width: 24px;
      height: 24px;
      z-index: 99;
    }
  }
}
</style>
